<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算器</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            table{
                width:500px;
				height:500px;
				border: 1px solid black;
				background-color: #999999;
				cellspacing:0px;
            }
            td{
                cursor: pointer;
				width:40px;
				height: 30px;
				border: 1px solid #FFFFFF;
				background: #999999;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				font-family: "微软雅黑";
            }
            td:hover{
                background: #008000;
            }
        </style>
        <script src="../jquery-1.9.1.min.js"></script>
        <script>
            $(function () {
                // 为计算器增加样式


                var str = "";
                // 获取输入框的节点
                var $input = $("table tr:eq(0) td");
                $("td").click(function () {
                    var text = $(this).html();
                    console.log(text);
                    if (text == "="){
                        try{
                            $input.html(eval(str));
                        } catch (e) {
                            $input.html("<span style='color: red;'>非法输入!</span>");
                        } finally {
                            str = "";
                        }
                    } else if (text == "C"){
                        str = "";
                        $input.html(str);
                    } else {
                        str += text;
                        $input.html(str);
                    }
                })
            })
        </script>
    </head>
    <body>
		<table align="center">
			<tr>
				<td colspan="5"></td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>+</td>
				<td>C</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>-</td>
				<td rowspan="3">=</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>*</td>
			</tr>
			<tr>
				<td>00</td>
				<td>0</td>
				<td>.</td>
				<td>/</td>
			</tr>
		</table>
	</body>
</html>
